<%@ page import="com.useeinfo.oa.modules.security.enums.OperationRoleEnum" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<script src="<c:url value="/resources/bootstrap/js/bootstrap-datetimepicker.min.js" />"></script>
<script src="<c:url value="/resources/bootstrap/js/bootstrap-datetimepicker.zh-CN.js" />"></script>
<link rel="stylesheet" href="<c:url value="/resources/bootstrap/css/bootstrap-datetimepicker.css" />">
<div class="main-content">
    <div class="box box-main">
        <form id="inputForm" model="post" action="<c:url value="/web/admin/manage/periodInstall/addOrEdit.action"/>"
              method="post" class="form-horizontal">
            <div class="box-body">
                <div class="form-unit">基本信息</div>
                <input id="id" name="id" value="${periodInstall.id}" type="hidden">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required ">*</span> 周期名称：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <input path="name" name="name" value="${periodInstall.name}"
                                       maxlength="100" class="form-control required " placeholder="请填入周期名称"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required">*</span> 说明：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <input path="remark" name="remark" maxlength="100" value="${periodInstall.remark}"
                                       class="form-control required " placeholder="请填入周期说明"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="box-body">
                <div class="form-unit">选择周期类型</div>
                <div class="row" style="margin:0!important;padding-left: 6%;">
                    <div>
                        <div class="ibox tabs-container ibox-content">
                            <label class="radio-inline">
                                <input type="radio"
                                       <c:if test="${periodInstall.planType=='1'||periodInstall.planType==''||periodInstall.planType==null}">checked="checked"</c:if>
                                       value="1" id="role1"
                                       name="planType"
                                       onclick="changeContent('frequency')">按频率
                            </label>
                            <label class="radio-inline">
                                <input type="radio"
                                       <c:if test="${periodInstall.planType=='2'}">checked="checked"</c:if>
                                       value="2" id="role2"
                                       name="planType"
                                       onclick="changeContent('allDate')">按日期
                            </label>
                            <label class="radio-inline">
                                <input type="radio"
                                       <c:if test="${periodInstall.planType=='3'}">checked="checked"</c:if>
                                       value="3" id="role3"
                                       name="planType"
                                       onclick="changeContent('week')">按星期
                            </label>
                        </div>
                        <div style="margin-top: 10px;min-height: 100px;">
                            <div class="ibox tabs-container ibox-content" id="frequencyContent">
                                <div id="ordinary_all_{{d.key}}">
                                    <div class="select-width10 float-left select-top1" pid="frequencyContent"
                                         fid="content" style="display: none; <c:if
                                            test="${periodInstall==null||periodInstall.planType=='1'||periodInstall.planType==''||periodInstall.planType==null}">display: block;</c:if>">
                                        <div class="select-width1 select-top1 float-left">
                                            频率：
                                        </div>
                                        <div class="select-width5 float-left select-left0_1">
                                            <select name="type" id="periodType" class="form-control select-width10">
                                                <option value="年"
                                                        <c:if test="${periodInstall.type=='年'}">selected</c:if>>年
                                                </option>
                                                <option value="月"
                                                        <c:if test="${periodInstall.type=='月'}">selected</c:if>>月
                                                </option>
                                                <option value="日"
                                                        <c:if test="${periodInstall.type=='日'}">selected</c:if>>日
                                                </option>
                                                <option value="周"
                                                        <c:if test="${periodInstall.type=='周'}">selected</c:if>>周
                                                </option>
                                                <option value="时"
                                                        <c:if test="${periodInstall.type=='时'}">selected</c:if>>时
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="select-width10 float-left select-top1" pid="frequencyContent"
                                         fid="content" style="display: none; <c:if
                                            test="${periodInstall==null||periodInstall.planType=='1'||periodInstall.planType==''||periodInstall.planType==null}">display: block;</c:if>">
                                        <div class="select-width1 select-top1 float-left">
                                            间隔：
                                        </div>
                                        <div class="select-width5 float-left select-left0_1">
                                            <input type="text" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                                                    path="frequency" id="frequency" placeholder="请填入整数周期间隔"
                                                   name="frequency" value="${periodInstall.frequency}"
                                                   class="form-control select-width10" required>
                                        </div>
                                    </div>

                                    <div class="select-width10 float-left select-top1" pid="allDateContent"
                                         fid="content" style="display: none;<c:if
                                            test="${periodInstall.planType=='2'}">display: block;</c:if>">
                                        <div class="select-width1 select-top1 float-left">
                                            间隔：
                                        </div>
                                        <div class="select-width5 float-left select-left0_1">
                                            <input path="allDate" id="allDate"
                                                   name="dateArray" placeholder="请填入周期间隔"
                                                   class="form-control select-width5" required>

                                            <input path="theDate" id="theDate"
                                                   name="theDate" placeholder="请选择周期间隔"
                                                   class="form-control select-width4">
                                        </div>
                                    </div>

                                    <div class="select-width10 float-left select-top1" pid="weekContent" fid="content"
                                         style="display: none; <c:if
                                                 test="${periodInstall.planType=='3'}">display: block;</c:if>">
                                        <div class="select-width1 select-top1 float-left">
                                            指定星期：
                                        </div>
                                        <div class="select-width5 float-left select-left0_1">
                                            <input path="weekArray" class="weekArray"
                                                   name="weekArray" type="checkbox" value="1"
                                                   <c:if test="${periodInstall.week.contains('1')}">checked</c:if>
                                                   class="select-width1"> 星期一
                                            <input path="weekArray" class="weekArray"
                                                   name="weekArray" type="checkbox" value="2"
                                                   <c:if test="${periodInstall.week.contains('2')}">checked</c:if>
                                                   class="select-width1"> 星期二
                                            <input path="weekArray" class="weekArray"
                                                   name="weekArray" type="checkbox" value="3"
                                                   <c:if test="${periodInstall.week.contains('3')}">checked</c:if>
                                                   class="select-width1"> 星期三
                                            <input path="weekArray" class="weekArray"
                                                   name="weekArray" type="checkbox" value="4"
                                                   <c:if test="${periodInstall.week.contains('4')}">checked</c:if>
                                                   class="select-width1"> 星期四
                                            <input path="weekArray" class="weekArray"
                                                   name="weekArray" type="checkbox" value="5"
                                                   <c:if test="${periodInstall.week.contains('5')}">checked</c:if>
                                                   class="select-width1"> 星期五
                                            <input path="weekArray" class="weekArray"
                                                   name="weekArray" type="checkbox" value="6"
                                                   <c:if test="${periodInstall.week.contains('6')}">checked</c:if>
                                                   class="select-width1"> 星期六
                                            <input path="weekArray" class="weekArray"
                                                   name="weekArray" type="checkbox" value="7"
                                                   <c:if test="${periodInstall.week.contains('7')}">checked</c:if>
                                                   class=" select-width1"> 星期日
                                        </div>
                                    </div>


                                    <div class="select-width10 float-left select-top1" id="theTimeDate" disabled=false
                                          <c:if test="${periodInstall.planType=='1'||periodInstall.planType==''||periodInstall.planType==null}">style="display:none; "</c:if>>

                                        <div class="select-width1 select-top1 float-left">
                                            时间：
                                        </div>
                                        <div class="select-width5 float-left select-left0_1">
                                            <input path="time" id="time"
                                                   name="timeArray" placeholder="请填入周期时间"
                                                   class="form-control select-width10" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <div class="row">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i>
                            保 存
                        </button>&nbsp;

                        <button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="closeView()"><i
                                class="fa fa-times"></i> 关 闭
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<style>
    .ms-sel-ctn {
        min-height: 21px !important;
        height: auto !important;
    }
    .form-control {
         height: auto;
    }
</style>
<script>
    var allDate_magicSuggest;
    var time;
    $(document).ready(function () {
        $("#theTimeDate").show()
        time = $('#time').magicSuggest({
            allowFreeEntries: false,
            data: [{'value': '00:00', 'text': '00:00'}, {'value': '00:30', 'text': '00:30'}, {
                'value': '01:00',
                'text': '01:00'
            }, {'value': '01:30', 'text': '01:30'},
                {'value': '02:00', 'text': '02:00'}, {'value': '02:30', 'text': '02:30'}, {
                    'value': '03:00',
                    'text': '03:00'
                }, {'value': '03:30', 'text': '03:30'},
                {'value': '04:00', 'text': '04:00'}, {'value': '04:30', 'text': '04:30'}, {
                    'value': '05:00',
                    'text': '05:00'
                }, {'value': '05:30', 'text': '05:30'},
                {'value': '06:00', 'text': '06:00'}, {'value': '06:30', 'text': '06:30'}, {
                    'value': '07:00',
                    'text': '07:00'
                }, {'value': '07:30', 'text': '07:30'},
                {'value': '08:00', 'text': '08:00'}, {'value': '08:30', 'text': '08:30'}, {
                    'value': '09:00',
                    'text': '09:00'
                }, {'value': '09:30', 'text': '09:30'},
                {'value': '10:00', 'text': '10:00'}, {'value': '10:30', 'text': '10:30'}, {
                    'value': '11:00',
                    'text': '11:00'
                }, {'value': '11:30', 'text': '11:30'},
                {'value': '12:00', 'text': '12:00'}, {'value': '12:30', 'text': '12:30'}, {
                    'value': '13:00',
                    'text': '13:00'
                }, {'value': '13:30', 'text': '13:30'},
                {'value': '14:00', 'text': '14:00'}, {'value': '14:30', 'text': '14:30'}, {
                    'value': '15:00',
                    'text': '15:00'
                }, {'value': '15:30', 'text': '15:30'},
                {'value': '16:00', 'text': '16:00'}, {'value': '16:30', 'text': '16:30'}, {
                    'value': '17:00',
                    'text': '17:00'
                }, {'value': '17:30', 'text': '17:30'},
                {'value': '18:00', 'text': '18:00'}, {'value': '18:30', 'text': '18:30'}, {
                    'value': '19:00',
                    'text': '19:00'
                }, {'value': '19:30', 'text': '19:30'},
                {'value': '20:00', 'text': '20:00'}, {'value': '20:30', 'text': '20:30'}, {
                    'value': '21:00',
                    'text': '21:00'
                }, {'value': '21:30', 'text': '21:30'},
                {'value': '22:00', 'text': '22:00'}, {'value': '22:30', 'text': '22:30'}, {
                    'value': '23:00',
                    'text': '23:00'
                }, {'value': '23:30', 'text': '23:30'}],
            //queryParam: 'q',
            valueField: "value",
            displayField: "text",
            maxSelection: 100,
            noSuggestionText: '',
            placeholder: '选择时间',
            required: true,
            autoSelect: true,
            selectFirst: true,
            selectionStacked:true,
            maxDropHeight:500,
            value: ${periodInstall.time}
        });

        allDate_magicSuggest = $('#allDate').magicSuggest({
            allowFreeEntries: false,
            data:${periodInstall.allDate},
            //queryParam: 'q',
            valueField: "value",
            displayField: "text",
            // maxSelection: 1,
            noSuggestionText: '',
            placeholder: '选择间隔',
            required: true,
            autoSelect: true,
            selectFirst: true,
            value: ${periodInstall.allDate}
        });
        var theDate = $("#theDate").datetimepicker({
            startDate: new Date(),
            language: 'zh-CN',
            minView: "month",//设置只显示到月份
            autoclose: true,//选中关闭
            todayBtn: true,//今日按钮
            format: 'mm-dd'
        }).on('changeDate', function (ev) {
            var dateValue = $("#theDate").val();
            allDate_magicSuggest.setValue([dateValue]);
        });
        // allDate_magicSuggest.setValue(${periodInstall.allDate});
        //time.setValue(${periodInstall.time});
    });


    $("#inputForm").validate({
        submitHandler: function (form) {
            if ($.trim(time.getValue()) == "" && $("#periodType").val()!="时") {
                js.showMessage("请选择时间");
                return false;
            }
            if ($("input[name='planType']:checked").val() == "2" && $.trim(allDate_magicSuggest.getValue()) == "") {
                js.showMessage("请选择日期间隔");
                return false;
            }
            if ($("input[name='planType']:checked").val() == "3" && $('.weekArray[type=checkbox]:checked').length <= 0) {
                js.showMessage("请选择星期数据");
                return false;
            }
            js.ajaxSubmitForm($(form), function (data) {
                js.showMessage(data.msg);
                if (data.status == Global.NO) {
                    closeView();
                    $('#dataGrid').dataGrid("refresh");
                }
            }, "json");
        }
    });


    function closeView() {
        layer.close(LayWin['wPeriodInstall']);
    }

    function changeContent(index) {
        var _this = $("div[pid=" + index + "Content]");
        hideAllContent();
        _this.show();
        if(index=='frequency'){
            $("#theTimeDate").hide();
        }else {
            $("#theTimeDate").show();
        }

    }

    function hideAllContent() {
        $("div[fid='content']").hide();
    }

    var operationRole = '';


    Array.prototype.contains = function (needle) {
        for (var i in this) {
            if (this[i] == needle) return true;
        }
        return false;
    }
    $("#periodType").change(function (){
        if($("#periodType").val()=="时"){
            $("#theTimeDate").hide()
        }else{
            $("#theTimeDate").show()
        }
    });


</script>


